<template>
	<view style="padding: 25rpx 30rpx;">
		<view class="points_bg">
			<image src="/static/my/img_jfye_bg.png" mode="widthFix"></image>
			<view class="gz" @click="Javigator()">积分规则</view>
			<view class="ne">当前积分</view>
			<view class="sum">{{userInfo.credit}}</view>
			<view class="btn" @click="Navigator()">上传小票</view>
		</view>
		<view class="points_list" v-for="(itme,index) in list" :key="index">
			<view class="left">
				  <view class="name">{{itme.businessName}}</view>
				  <view class="time">{{itme.createTime | formatDate}}</view>
			</view>
			<view class="tgs">{{itme.flowType == 1 ? '获取' : '消耗'}}</view>
			<view class="sum"> {{ itme.flowType == 1 ? '+' : ''}}{{itme.credit}}</view>
		</view>
		<view v-if="list.length < 1 & restafals" style="text-align: center;
    padding: 35rpx 0;">暂无积分记录</view>
		<!-- 返回顶部按钮 -->
		<view class="back-to-top" v-if="showBackToTop" @click="scrollToTop">
			<!-- <image src="/static/my/back-to-top.png" mode="widthFix"></image> -->
			<text>返回顶部</text>
		</view>
	</view>
</template>

<script>
	import { creditFlowpage } from '@/core/api/index.js'
	import { mapState } from 'vuex';
	export default{
		data(){
			return{
				list:[],
				showBackToTop: false, // 是否显示返回顶部按钮
				scrollTimer: null ,// 滚动动画定时器
				restafals:false
			}
		},
		computed: {
		  ...mapState({
		    userInfo: state => state.user.userInfo
		  })
		},
		onLoad() {
			this.ReceiptPage()
		},
		onShow() {
			// 页面显示时监听滚动事件
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			})
		},
		onPageScroll(e) {
			// 监听页面滚动，控制按钮显示
			if (e.scrollTop > 300) {
				this.showBackToTop = true
			} else {
				this.showBackToTop = false
			}
		},
		methods:{
			Navigator(){
				uni.navigateTo({
					url:'/pages/receipt/index'
				})
			},
			Javigator(){
				uni.navigateTo({
					url:'/pages/my/points_rule'
				})
			},
			async ReceiptPage(){
				let parmse = {
					page:1,
					size:100
				}
				const {data} = await creditFlowpage(parmse)
				this.list = data.records
				this.restafals = true
			},
			// 返回顶部方法
			scrollToTop() {
				// 平滑滚动到顶部
				let scrollTop = getCurrentPages()[0].scrollTop || 0
				const duration = 300 // 滚动持续时间
				const step = scrollTop / (duration / 16) // 每16ms滚动的距离
				
				const timer = setInterval(() => {
					scrollTop -= step
					if (scrollTop <= 0) {
						scrollTop = 0
						clearInterval(timer)
					}
					uni.pageScrollTo({
						scrollTop: scrollTop,
						duration: 16
					})
				}, 16)
				
				this.scrollTimer = timer
			}
		},
		onUnload() {
			// 页面卸载时清除定时器
			if (this.scrollTimer) {
				clearInterval(this.scrollTimer)
			}
		}
	}
</script>

<style lang="scss">
	.points_bg{
		position: relative;
		height: 248rpx;
		image{
			z-index: -1;
			width: 100%;
			position: absolute;
		}
		.gz{
			color: #fff;
			text-align: right;
			padding: 36rpx 32rpx 20rpx;
			font-size: 24rpx;
		}
		.ne , .sum{
			padding-left: 64rpx;
			color: #fff;
			font-size: 28rpx;
		}
		.sum{
			font-size: 45rpx;
			font-weight: 700;
		}
		.btn{
			position: absolute;
			text-align: center;
		    width: 125rpx;
			font-size: 22rpx;
			height: 40rpx;
			background-color: #fff;
			text-align: center;
			color: #FF5640;
			right: 32rpx;
			line-height: 38rpx;
			top: 62%;
			border-radius: 20rpx;
		}
	}
	.points_list{
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #ececec;
		align-items: center;
		background-color: #fff;
		display: flex;
		position: relative;
		justify-content: space-between;
		.left{
		    .time{
				font-size: 24rpx;
				color: var(--, #A3A3A3);
			}
		}
		.tgs{
			color: #929292;
			    right: 31%;
			position: absolute;
		}
	}
	
	/* 返回顶部按钮样式 */
	.back-to-top {
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color:#EC681B;
		padding: 15rpx 20rpx;
		border-radius: 30rpx;
		text-align: center;
		color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		
		// image {
		// 	width: 40rpx;
		// 	height: 40rpx;
		// 	margin-bottom: 5rpx;
		// }
		
		text {
			font-size: 22rpx;
			// color: #666;
		}
	}
</style>